<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>室内监控图</title>
	<link rel="stylesheet" href="leaflet.css">
	<style type="text/css">
		html,
		body {
			width: 100%;
			height: 100%;
			margin: 0 !important;
			padding: 0 !important;
		}

		#map {
			height: 100%;
			width: 100%;
		}

		.map-container {
			height: 100vh;
			width: 100vw;
			position: relative;
			background-color: #dddddd;
			padding: 0;
			margin: 0;
		}

		.menu-top {
			position: absolute;
			z-index: 99999999999999999;
			top: 0;
			left: 0;
			width: 100%;
			height: 5.6vh;
			color: #666666;
		}

		.menu-bottom {
			position: absolute;
			z-index: 99999999999999999;
			bottom: 0;
			left: 0;
			width: 100vw;
			max-height: 50vh;
			overflow: auto;
			background-color: #fff;
			font-size: 1.8vh;
		}

		.menu-bottom .yc {
			text-align: center;
			padding-bottom: 10px;
		}

		.menu-bottom .yc p {
			margin: 0;
		}

		.menu-bottom .deviceList {
			padding-left: 15px;
			text-align: left;
		}

		.menu-bottom .deviceList .device {
			border-bottom: solid 1px #999999;
			margin: 0;
			padding-top: 15px;
			padding-bottom: 15px;
		}

		.menu-bottom .deviceStatus {
			padding-left: 10px;
			padding-right: 10px;
			margin-left: 10px;
			display: inline-block;
			font-size: 1.5vh;
			line-height: 2vh;
			border: solid 1px #999999;
			border-radius: 10px;
		}

		.menu-bottom .deviceAddress {
			font-size: 1.5vh;
			color: #999999;
		}

		.floor,
		.status,
		.type {
			width: 33.333vw;
			float: left;
			height: 100%;
		}

		select {
			width: 100%;
			height: 100%;
			border: none;
			outline: none;
			background-color: #ffffff;
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			background-image: url("./arrow.png");
			background-position: 80% center;
			background-repeat: no-repeat;
			background-size: 15px 15px;
			text-align: center;
			font-size: 1.8vh;
			padding: 0 6vw;
			color: #303753;
		}

		.hide {
			display: none;
		}

		.yc {
			padding-top: 10px;
		}

		.img {
			text-align: center;
		}

		.img p {
			margin: 0;
		}

		.img img {
			width: 20px;
			height: 10px;
		}

		#mapBox {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: absolute;
		}

		#box {
			width: 100%;
			height: 100%;
			background-color: #dddddd;
			position: relative;
		}
	</style>
</head>

<body>
<div id='box'>
	<div id='mapBox'>
		<div id="map">
		</div>
	</div>
</div>


</body>

<script src="leaflet.js"></script>
<script src="LeafletDraggable.js"></script>
<script src="leaflet.rotatedMarker.js"></script>
<script src="leaflet.ChineseTmsProviders.js"></script>
<script src="jquery.min.js"></script>

<script type="text/javascript">
	//基础信息
	var ip = '';
	var port = '';
	var buildingId = '';
	var floorId = '';
	var sysId = '';
	var typeId = '';
	var statusId = '';
	var token = '';
	var companyId = '';
	var buildingLng = '';
	var buildingLat = '';
	var buildingUri = '';
	var floorArr = [];

	//地图信息
	var cadMap = null;
	var floorCur = null;
	var floorCad = null;
	var floorCadName = null;
	var floorEqu = null;
	var floorVideo = null;

	//面板信息
	var ycNum = 0;

	var getBuild = $.Deferred();
	var getFloor = $.Deferred();
	var getType = $.Deferred();
	var getJson = $.Deferred();
	var getEqu = $.Deferred();
	var getVideo = $.Deferred();

	//
	$(function () {
		//模拟app调用
		// bridgeData2(
		// 	'1332209064860549122',
		// 	'1332209427424575490',
		// 	'',
		// 	'121.196.13.132',
		// 	'8081',
		// 	'KDLAeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjb21wYW55SWQiOm51bGwsInJvbGVJZHMiOiIxIiwiZGVwdElkIjpudWxsLCJjcmVhdGUiOjE2MjUxODYzODE3OTIsImlkIjoiMSIsInRlcm1pbmFsIjoiV2ViIiwicmVwYWlyQ29tcGFueUlkIjpudWxsLCJvcmdJZCI6bnVsbCwiYXV0aG9yaXRpZXMiOlt7ImF1dGhvcml0eSI6IlJPTEVfU1VQRVJfQURNSU4ifV0sInVzZXJuYW1lIjoic3VwZXJhZG1pbiJ9.hrL73iFcIENqR7gw10upZUWOQK7K4IfWvwzMs1SsGUU',
		// 	'1332205992402845697',
		// )
	});

	//带筛选 全部点位界面
	function bridgeData2(bid, fid, fc, i, p, t, c) {
		buildingId = bid;
		floorId = fid;
		floorCad = fc;
		ip = i;
		port = p;
		token = t;
		companyId = t;
		//获取楼栋信息、楼层信息、类型信息后执行
		$.when(wait(getBuild))
			.done(function () {
				loadMap(floorId);
			})

	}
	var wait = function (dtd) {
		var tasks = function () {
			var url = "http://" + ip + ":" + port + "/app/area/getBuildingDetailById";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					id: buildingId,
				}),
				success: function (result) {
					buildingLng = result.data.aerialViewLongitude
					buildingLat = result.data.aerialViewLatitude
					dtd.resolve(); // 改变deferred对象的执行状态
				},
			});
		};
		tasks();
		return dtd;
	};

	var wait2 = function (dtd) {
		var tasks2 = function () {
			var url = "http://" + ip + ":" + port + "/app/area/getFloorListByBuildingId";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					id: buildingId,
				}),
				success: function (result) {
					if (result.data.length > 0) {
						floorArr = result.data;
						$.map(result.data, function (item) {
							$("select[name='floor']").append(
								"<option value='" +
								item.id +
								"'>" +
								item.name +
								"</option>")
						})
					}
					dtd.resolve();
				},
			});
		};
		tasks2();
		return dtd;
	};


	var wait3 = function (dtd) {
		var tasks3 = function () {
			var url = "http://" + ip + ":" + port + "/app/equ/getEquTypeListBySysId";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					id: sysId,
				}),
				success: function (result) {
					if (result.data.length > 0) {
						$.map(result.data, function (item) {
							$("select[name='type']").append(
								"<option value='" +
								item.id +
								"'>" +
								item.name +
								"</option>")
						})
					}
					dtd.resolve();
				},
			});
		};
		tasks3();
		return dtd;
	};


	var wait4 = function (CadFloorId, dtd) {
		var tasks4 = function () {
			var url = "http://" + ip + ":" + port + "/app/area/getFloorCadJsonById";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					id: CadFloorId,
				}),
				success: function (result) {
					dtd.resolve(result);
				},
			});
		};
		tasks4();
		return dtd;
	};

	var wait5 = function (buildingId, floorId, sysId, typeId, statusId, dtd) {
		var tasks5 = function () {
			var url = "http://" + ip + ":" + port + "/app/home/getEquMonitorInfoForCad";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					companyId: companyId,
					buildingId: buildingId,
					floorId: floorId,
					equSysId: sysId,
					equTypeId: typeId,
					runStatus: statusId,
				}),
				success: function (result) {
					dtd.resolve(result.data);
				},
			});
		};
		tasks5();
		return dtd;
	};
	var wait6 = function (floorId, dtd) {
		var wait6 = function () {
			var url = "http://" + ip + ":" + port + "/app/equ/getEquVideoListByFloorId";
			$.ajax({
				type: "POST",
				url: url,
				beforeSend: function (request) {
					request.setRequestHeader("kdla-access-token", token);
					request.setRequestHeader("Content-Type", 'application/json');
				},
				data: JSON.stringify({
					id: floorId,
				}),
				success: function (result) {
					dtd.resolve(result.data);
				},
			});
		};
		wait6();
		return dtd;
	};


	function removeFromMap(layer) {
		if (cadMap.hasLayer(layer)) {
			layer.removeFrom(cadMap);
		}
	}

	function loadMap(floorId) {
		cadMap ? cadMap.off() && cadMap.remove() : null
		cadMap = L.map("map", {
			minZoom: 12,
			maxZoom: 23,
			attributionControl: false,
			logo: false, //不显示logo
			zoomControl: false, //不显示放大缩小按钮
			center: [buildingLat, buildingLng], //这里每个楼栋的经纬度
			zoom: 20
		});
		addFloorCad(floorId);

	}

	function addFloorCad(floorId) {
		if (floorId != '') {
			$.when(wait4(floorId, getJson))
				.done(function (res) {
					//获取到楼层cadjson
					// var cadJson = eval("0,(" + json + ")");
					var cadJson = res.data.cadJson;
					floorCad = L.featureGroup();

					if (typeof cadJson == "object") {
						var WALL = cadJson.lines.WALL, WINDOW = cadJson.lines.WINDOW, Road = cadJson.lines.Road,
							Center = cadJson.lines.Center, points = cadJson.points, fontsize = cadJson.fontsize;

						if (WALL && WALL.length > 0) {
							for (var i = 0; i < WALL.length; i++) {
								var latlng = WALL[i];
								L.polyline(latlng, {
									color: "#012cfc",
									weight: 1.0,
								}).addTo(floorCad);
							}
						}

						if (WINDOW && WINDOW.length > 0) {
							for (var i = 0; i < WINDOW.length; i++) {
								var latlng = WINDOW[i];
								L.polyline(latlng, {
									color: "#0067ff",
									weight: 1.0,
								}).addTo(floorCad);
							}
						}

						if (Road && Road.length > 0) {
							for (var i = 0; i < Road.length; i++) {
								var latlng = Road[i];
								L.polyline(latlng, {
									color: "#0da04f",
									weight: 1.0,
								}).addTo(floorCad);
							}
						}
						if (Center && Center.length > 0) {
							for (var i = 0; i < Center.length; i++) {
								var latlng = Center[i];
								L.polyline(latlng, {
									color: "#0da04f",
									weight: 2.0,
									opacity: 1,
									dashArray: "30,10,5,10",
								}).addTo(floorCad);
							}
						}

						floorCadName = L.featureGroup();

						if (points && points.length > 0) {
							for (var i = 0; i < points.length; i++) {
								var item = points[i];
								var lat = item.latlng[0];
								var lng = item.latlng[1];
								var name = item.name;
								var corner1 = L.latLng(lat - fontsize, lng - 2 * fontsize),
									corner2 = L.latLng(lat + fontsize, lng + 2 * fontsize);
								var bounds = L.latLngBounds(corner1, corner2);
								var svgElement = document.createElementNS(
									"http://www.w3.org/2000/svg",
									"svg"
								);
								svgElement.setAttribute("viewBox", "0 0 40 40");
								svgElement.innerHTML =
									'<text   x="20" y="20" text-anchor="middle" dominant-baseline="middle" fill="black" >' +
									name +
									"</text>";
								L.svgOverlay(svgElement, bounds).addTo(floorCadName);
							}
						}

						floorCad.addTo(cadMap)
						floorCadName.addTo(cadMap)

						if (Object.values(floorCad._layers).length > 0) {
							floorCad.addTo(cadMap);
							cadMap.fitBounds(floorCad.getBounds());
						}
						createPoint()
					} else {
						const image = new Image();
						image.src = cadJson;
						let imgW = 1660, imgH = 830

						image.onload = () => {
							imgW = image.width > imgW ? imgW : image.width;
							imgH = image.height > imgH ? imgH : image.height;
							getParentWH(imgW, imgH);
							cadMap ? cadMap.off() && cadMap.remove() : null
							cadMap = L.map("map", {
								minZoom: 12,
								maxZoom: 23,
								attributionControl: false,
								logo: false, //不显示logo
								zoomSnap: 0.03,
								zoomControl: false, //不显示放大缩小按钮

								crs: L.CRS.EPSG3857,
								zoom: 18
							});
							// cadMap.dragging._draggable.setRotate(rotateAngle);
							cadMap.setView([0, 0]);
							cadMap.setZoom(16);
							const southWest = cadMap.layerPointToLatLng(L.point(0, 0));
							const northEast = cadMap.layerPointToLatLng(L.point(imgW, imgH));

							let mageBounds = new L.LatLngBounds(southWest, northEast);
							L.imageOverlay(cadJson, mageBounds).addTo(floorCad);
							floorCad.addTo(cadMap);
							if (Object.values(floorCad._layers).length > 0) {
								floorCad.addTo(cadMap);
								cadMap.fitBounds(floorCad.getBounds());
							}
							createPoint()
						};
					}

				})

		}
	}
	function createPoint() {
		//添加监控设备
		floorVideo = null;
		floorVideo = L.featureGroup();
		$.when(wait6(floorId, getVideo))
			.done(function (ress) {
				if (ress.length > 0) {
					for (var i = 0; i < ress.length; i++) {
						var video = ress[i];
						if (video.latitude || video.longitude) {
							var videoMarker = L.marker(L.latLng(video.latitude, video.longitude), {
								video: video,
								icon: new L.Icon({
									//预警icon
									iconUrl: 'http://134.175.220.20/leaflet/video.png', //设备的图标，后台直接推送url,
									iconSize: [33, 38],
									iconAnchor: [17, 38],
									popupAnchor: [1, -38]
								}),
							}).on('click', function (e) {
								jump2(this.options.video);
							}).addTo(floorVideo);
						}
					}
				}
			}).then(function () {
				floorVideo.addTo(cadMap);
			})
	}
	function jump2(video) {
		window.WebViewJavascriptBridge.callHandler(
			'skipToVideoDetail'
			//设备id 楼栋id 系统id
			, '{"accessMode":"' + video.accessMode + '","port":"' + video.port + '","ip":"' + video.ip + '","serial":"' + video.serial + '","channelNo":"' + video.channelNo + '","streamUrl":"' + video.streamUrl + '"}',
			function (responseData) {

			}
		);
	}
	function getParentWH(imgW, imgH) {

		const $box = document.querySelector('#mapBox');
		let pw = $box.clientWidth;
		let ph = $box.clientHeight;
		let lw = 0
		if (!pw || !ph) {
			lw = 0
		} else {
			lw = (pw - imgW) / 2;
		}
		let th = 0
		if (!pw || !ph) {
			th = 0
		} else {
			th = (ph - imgH) / 2;
		}
		$('#mapBox').css({
			width: `${imgW}px`,
			height: `${imgH}px`,
			top: `${th}px`,
			left: `${lw}px`,
		})
	}

</script>

</html>